<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>布局及样式</title>
<style type="text/css">
h1{color:red;}
.kuang,.kuang2{
    border:3px solid red;
    margin-bottom:10px;
 }
 .kuang2{
      display:flex;
      flex-direction:row;
      align-items:center;
 }
 .item{
     border:1px solid blue;
     margin:10px;
 }
 span{color:blue;}
</style>
 </head>
 <body>
 <h1>布局及样式</h1>
 <div class='kuang'>
     <div class='item'>div1-块元素</div>
     <div class='item'>div2-块元素</div>
     <div class='item'>div3-块元素</div>
 </div>
 <div class='kuang2'>
   <div class='item'>
       <div>div1-块元素</div>
       <div>div1-块元素</div>
       <div>div1-块元素</div>
   </div>
   <div class='item'>
       <div>div3-块元素</div>
       <div>div3-块元素</div>
   </div>
 
 </div>
 </body>
 </html>